<template>
  <el-drawer
    :visible.sync="dialogVisible"
    :wrapper-closable="true"
    :close-on-press-escape="false"
    :with-header="showMobilePage"
    :size="showMobilePage ? '100%' : 400"
    :before-close="handleClose"
    :show-close="showMobilePage"
    class="score-drawer"
  >
    <div :style="{ 'border-bottom-left-radius': btnState ? '8px' : '0', 'border-bottom-right-radius': btnState ? '8px' : '0' }" class="top-box">
      <div class="header-box flex">
        <div class="title">订单评分</div>
        <el-rate
          v-if="score"
          v-model="score"
          :show-score="!!score"
          :colors="{ 5: '#FFBC3D' }"
          disabled
          score-template="{value}"/>
        <div v-else class="title">- -</div>
      </div>
      <div v-loading="loading" class="list-box">
        <div v-if="list.length" class="item-box">
          <div v-for="item in list" :key="item.id" class="flex list-item">
            <div class="flex-left">
              <CheckUserInfo :user-id="item.userId" :no-loading="true" style="cursor: pointer;">
                <div class="avatar">
                  <img :src="handelAvatar(item.avatar || defaultAvatar)" :alt="item.userId">
                </div>
              </CheckUserInfo>
            </div>
            <div class="flex-right">
              <div class="flex">
                <div class="name">{{ item.userName }}</div>
                <el-rate
                  v-model="item.score"
                  :show-score="!!item.score"
                  disabled
                  score-template="{value}"/>
              </div>
              <div class="comment">
                <ToolTip v-if="item.content" :content="item.content" :line-num="3" :is-show-default="false" />
                <span v-else class="default-text">暂无评论</span>
              </div>
              <div class="bottom flex">
                <div class="time">{{ (item.updateDate || item.createDate) | format('YYYY/MM/DD') }}</div>
                <div v-if="item.userId === userInfo.id" class="btn-row">
                  <img v-if="btnState" :src="editIcon" alt="edit" @click="handleModify" >
                  <img :src="delIcon" class="del" alt="del" @click="handleDelete(item.id)" >
                </div>
              </div>
            </div>
          </div>
        </div>
        <empty-placeholder v-else :empty-img="emptyIcon" text="还没有评分哦" image-size="120px" />
      </div>
    </div>
    <div v-if="!btnState" class="edit-box">
      <div class="flex">
        <el-rate
          v-model="myData.score"
          :allow-half="true"
          :show-score="!!myData.score"
          :colors="{ 5: '#FFBC3D' }"
          score-template="{value}"/>
        <el-button v-if="!btnState" :disabled="!myData.score" :loading="submitLoading" type="primary" size="small" @click="handleSubmit">提交</el-button>
      </div>
      <div class="comment-box">
        <el-input v-model="myData.content" resize="none" type="textarea" maxlength="200" placeholder="请输入评价" />
      </div>
    </div>
  </el-drawer>
</template>

<script>
import defaultAvatar from '@/assets/user-avatar.png';
import { modifyOrderScore, deleteOrderScore, addOrderScore } from '@/api/order';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import { mapState } from 'vuex';
import { format } from '@/filters/date';
import emptyIcon from '@/assets/empty-score.png';
import delIcon from '@/assets/orderlist/del.png';
import editIcon from '@/assets/orderlist/edit.png';
export default {
  components: {
    EmptyPlaceholder
  },
  filters: { format },
  props: {
    title: {
      type: String,
      default: '订单评分'
    },
    score: {
      type: Number,
      default: null
    },
    businessId: {
      type: Number,
      default: null
    },
    list: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    showMobilePage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      emptyIcon,
      delIcon,
      editIcon,
      dialogVisible: false,
      defaultAvatar,
      btnState: 0, // 0提交，1修改
      submitLoading: false,
      myData: {
        score: 0,
        content: ''
      }
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    initMyData() {
      const { id, name, avatar } = this.userInfo;
      return { score: 0, content: '', userId: id, username: name, avatar: avatar };
    }
  },
  watch: {
    list: {
      handler(v) {
        const { id } = this.userInfo;
        const result = v.find(it => it.userId === id);
        this.myData = { ...result } || this.initMyData;
      },
      deep: true
    }
  },
  methods: {
    initData() {
      const { id } = this.userInfo;
      const result = this.list.find(it => it.userId === id);
      this.myData = { ...result } || this.initMyData;
      this.btnState = this.list ? this.myData.id ? 1 : 0 : 0;
    },
    openDialog() {
      this.initData();
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.btnState = this.list ? this.myData.id ? 1 : 0 : 0;
      this.myData = this.initMyData;
    },
    handelAvatar(imgUrl) {
      if (imgUrl.indexOf('dingtalk.com') >= 0) {
        return imgUrl + '_40x40.jpg';
      }
      return imgUrl;
    },
    handleModify() {
      this.btnState = 0;
    },
    handleDelete(id) {
      this.$confirm('是否确认删除评分?', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        deleteOrderScore({ id: Number(id) }).then(res => {
          if (res.code === 200) {
            this.myData = this.initMyData;
            this.btnState = 0;
            this.$message.success('删除成功');
            this.$emit('updateScore');
          }
        }).catch(err => {
          console.error(err.message);
        });
      }).catch(() => {
        return;
      });
    },
    async handleSubmit() {
      const { score, content, id } = this.myData;
      const params = {
        score,
        content: content
      };
      if (id) {
        params.id = id;
      } else {
        params.businessId = this.businessId;
      }
      this.submitLoading = true;
      try {
        const res = id ? await modifyOrderScore(params) : await addOrderScore(params);
        if (res.code === 200) {
          this.$emit('updateScore');
          this.submitLoading = false;
          this.btnState = 1;
        }
      } catch (err) {
        console.error(err.message);
        this.submitLoading = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.score-drawer {
  ::v-deep .el-drawer {
    padding: 16px;
    .el-drawer__header {
      margin-bottom: 0;
      padding: 0;
    }
    .el-drawer__body {
      display: flex;
      flex-flow: column nowrap;
      overflow: auto;
    }
  }
  ::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
  }
  ::v-deep .el-dialog__body {
    border-radius: 8px;
    background-color: #FAFBFF;
  }
   ::v-deep .el-rate__text {
    font-size: 20px;
    font-weight: 700;
    color: #000 !important;
    font-family: DIN Alternate, DIN Alternate-Bold;
    line-height: 16px;
    margin-left: 6px;
  }
  .flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .top-box {
    padding: 12px;
    flex: 1;
    background-color: #FAFBFF;
    border: 1px solid #E6EDFF;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex;
    flex-flow: column nowrap;
    overflow: hidden;
  }
  .header-box {
    margin-bottom: 12px;
    width: 100%;
    padding: 13px 12px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 3px 6px 0px #dde1ea;
    .title {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #333333;
      line-height: 16px;
      margin-right: 12px;
    }
    ::v-deep .el-rate__icon {
      font-size: 22px;
    }
  }
  .list-box {
    overflow: auto;
    flex: 1;
    position: relative;
    ::v-deep .empty-placeholder-container {
      justify-content: flex-start;
      padding-top: 52px;
    }
    .item-box {
      background: #ffffff;
      border-radius: 8px;
      padding: 0 12px;
      margin-bottom: 12px;
      box-shadow: 0px 3px 6px 0px #dde1ea;
    }
    .list-item {
      padding: 12px 0 7.5px;
      align-items: flex-start;
      &:not(:last-child) {
        border-bottom: 1px solid #EBEEFD;
      }
    }
    .flex-left {
      display: flex;
      width: 48px;
      justify-content: flex-start;
      .avatar {
        > img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 1px solid #ffffff;
        }
      }
    }
    .flex-right {
      flex: 1;
      ::v-deep .el-rate__icon {
        font-size: 22px;
      }
      .comment {
        height: 78px;
        background-color: #FAFAFC;
        margin: 5px 0;
        padding: 8px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        .default-text {
          color: #999999;
        }
      }
      .bottom {
        justify-content: space-between;
        .btn-row {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .del {
            margin-left: 12px;
          }
        }
        .time {
          font-size: 12px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          color: #999999;
          line-height: 14px;
        }
        img {
          width: 14px;
          cursor: pointer;
        }
      }
      .name {
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        color: #333333;
        line-height: 14px;
        margin-right: 12px;
        font-size: 14px;
      }
    }
    ::v-deep .empty-text {
      color: #999 !important;
    }
    ::v-deep .empty-placeholder-container {
      height: 100%;
      background-color: #FAFBFF;
    }
  }
  .edit-box {
    padding: 5px 23px 0;
    height: 188px;
    border: 1px solid #E6EDFF;
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    ::v-deep .el-rate__icon {
      font-size: 20px;
      margin-right: 8px;
    }
    .flex {
      justify-content: space-between;
    }
    .comment-box {
      padding-top: 6px;
      ::v-deep .el-textarea {
        .el-textarea__inner {
          height: 120px;
        }
      }
    }
  }
  ::-webkit-scrollbar-thumb {
    background-color: #DDD !important;
  }
}
</style>
